<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="120">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合格证编号">
            <el-input v-model="searchForm.certificateNo" placeholder="请输入合格证编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌号">
            <el-input v-model="searchForm.licenseNumber" placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="进厂出厂日期">
            <el-input v-model="searchForm.productName" placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业名称">
            <el-input v-model="searchForm.productName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业编号">
            <el-input v-model="searchForm.productName" placeholder="请输入企业编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button>重置</el-button>
            <el-button type="primary">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增合格证信息</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="enterPise" label="打印合格证信息" width="130" align="center" />
      <el-table-column prop="device" label="维修企业名称" width="180" align="center" />
      <el-table-column prop="licenseNumber" label="车牌号" width="140" align="center" />
      <el-table-column prop="certificateNo" label="合格证编号" width="160" align="center" />
      <el-table-column prop="method" label="企业编号" width="120" align="center" />
      <el-table-column prop="consignor" label="拖修人" width="120" align="center" />
      <el-table-column prop="enterFactoryTime" label="进厂日期" width="180" align="center" />
      <el-table-column prop="leaveFactoryTime" label="出厂日期" width="180" align="center" />
      <el-table-column label="操作" align="center" width="240" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该设备?" @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
        <el-form-item label="合格证编号" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="请输入合格证编号" />
        </el-form-item>
        <el-form-item label="车牌号码" prop="licenseNumber">
          <el-input v-model="form.licenseNumber" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="车辆VIN码" prop="vinCode">
          <el-input v-model="form.vinCode" placeholder="请输入车辆VIN码" />
        </el-form-item>
        <el-form-item label="维修合同编号" prop="repairContractNo">
          <el-input v-model="form.repairContractNo" placeholder="请输入维修合同编号" />
        </el-form-item>
        <el-form-item label="承修单位" prop="repaire">
          <el-input v-model="form.repaire" placeholder="请输入承修单位" />
        </el-form-item>
        <el-form-item label="进厂日期" prop="enterFactoryTime">
          <el-date-picker
            v-model="form.enterFactoryTime"
            type="date"
            placeholder="请选择进厂日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="出厂日期" prop="leaveFactoryTime">
          <el-date-picker
            v-model="form.leaveFactoryTime"
            type="date"
            placeholder="请选择出厂日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="车型" prop="carType">
          <el-input v-model="form.carType" placeholder="请输入车型" />
        </el-form-item>
        <el-form-item label="托修人" prop="consignor">
          <el-input v-model="form.consignor" placeholder="请输入托修人" />
        </el-form-item>
        <el-form-item label="出厂里程表示值" prop="leaveMileage">
          <el-input v-model="form.leaveMileage" placeholder="请输入出厂里程表示值" />
        </el-form-item>
        <el-form-item label="返修次数" prop="rollbackNum">
          <el-input v-model="form.rollbackNum" placeholder="请输入返修次数" />
        </el-form-item>
        <el-form-item label="质保里程" prop="warrantyMileage">
          <el-input v-model="form.warrantyMileage" placeholder="请输入质保里程" />
        </el-form-item>
        <el-form-item label="质保天数" prop="warrantyDays">
          <el-input v-model="form.warrantyDays" placeholder="请输入质保天数" />
        </el-form-item>
        <el-form-item label="发动机号" prop="engineNumber">
          <el-input v-model="form.engineNumber" placeholder="请输入发动机号" />
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import {
  getCertificatePageApi,
  addCertificateApi,
  editCertificateApi,
  deleteCertificateApi
} from "@/api/maintain";
import FormDrawer from "@/components/FormDrawer.vue";

const { tableData, searchForm, currentPage, limit, total, handleGetTableList, handleDelete } =
  useInitTable({
    searchForm: {
      certificateNo: "",
      licenseNumber: ""
    },
    getTableList: getCertificatePageApi,
    deleteData: deleteCertificateApi
  });

const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      certificateNo: "",
      licenseNumber: "",
      vinCode: "",
      repairContractNo: "",
      repaire: "",
      enterFactoryTime: "",
      leaveFactoryTime: "",
      carType: "",
      consignor: "",
      leaveMileage: "",
      rollbackNum: "",
      warrantyMileage: "",
      warrantyDays: "",
      engineNumber: ""
    },
    rules: {
      certificateNo: [{ required: true, message: "请输入合格证编号", trigger: "blur" }],
      licenseNumber: [{ required: true, message: "请输入车牌号码", trigger: "blur" }],
      vinCode: [{ required: true, message: "请输入车辆VIN码", trigger: "blur" }],
      repairContractNo: [{ required: true, message: "请输入维修合同编号", trigger: "blur" }],
      repaire: [{ required: true, message: "请输入承修单位", trigger: "blur" }],
      enterFactoryTime: [{ required: true, message: "请选择进厂日期", trigger: "blur" }],
      leaveFactoryTime: [{ required: true, message: "请选择出厂日期", trigger: "blur" }]
    },
    createData: addCertificateApi,
    updateData: editCertificateApi,
    success: () => {
      handleGetTableList();
    }
  }
);
</script>
<style scoped lang="scss"></style>
